<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes animateName{ 
   0% {
    width:100px; 
    height:100px; 
  }
  30% {
    width:200px; 
    height:200px; 
    background:#fcbbb5;
  }
  50% {
    width:300px;
    height:300px;
    background: #fab677;
  } 
  100% {
    width:200px;
    height:200px;
    background: #00aaff;
    border-radius: 50%;
  }
}

.divClass{
  width: 300px;
  height: 300px;
  background: #b5f18e;
  /* 动画名称 */
  animation-name: animateName;
  /* 动画时间 */
  animation-duration: 3s;
  /* transition: all ease-out 4s 2s; */
  transform: scale(1.5);
}

    </style>
</head>
<body>
    <div class="divClass"></div>

</body>
</html>